<template>
    <div class="MyNavgation">
        <!--        <div class="navgationList">-->
        <!--            <a @click="previousPage" v-show="pageNow>0"><span class="fa fa-chevron-left"></span></a>-->

        <!--            <a :class="{active:index == pageNow}" :key="index" @click="toPage(index)"-->
        <!--               v-for="(item,index) in this.navList">-->
        <!--                <span>{{ item }}</span>-->
        <!--            </a>-->
        <!--            <a @click="nextPage" v-show="pageNow<pageNum"><span class="fa fa-chevron-right"></span></a>-->
        <!--        </div>-->
        <el-pagination :small="navBarSize"
                       :total="pageNum"
                       :page-size="pageSize"
                       @click="handelClick($event)"
                       @current-change="toPage($event)"
                       @next-click="nextPage"
                       @prev-click="previousPage"
                       background
                       layout="prev, pager, next"
        >

        </el-pagination>


    </div>
</template>

<script>
    export default {
        name: "MyNavgation",
        data() {
            return {
                //现在是第几页
                windowWidth: document.documentElement.clientWidth,
                //最多有几页
                navList: [],
              pageSize:5
            }
        },
        mounted() {
            //初始化 导航栏

            this.navList = this.initNavList
            // console.log(this.pageNum)
        },
        computed: {
            initNavList() {
                let list = []
                for (let i = 0; i < this.pageNum; i++) {
                    list[i] = i + 1
                }
                return list
            },
            pageNow() {
                return this.$store.state.pageNow
            },
            pageNum() {
                return this.$store.state.pageNum
            },
            navBarSize() {
                // console.log(this.windowWidth)
              //根据屏幕宽度选择navBar的样式
                if (this.windowWidth < 1024) {
                    return true
                } else {
                    return false
                }
            }
        },

        watch: {
            // '$route'(to,from){
            //     console.log('watch到变化Home')
            // }
            'pageNow'() {
                console.log('导航栏监控' + this.pageNow)
            },

        },

        methods: {
            test(e) {
                console.log(e)

            },
            toPage(index) {
                this.$store.commit('UpdatePageNow', index)
              let tag = this.$store.state.tag
              this.$router.push({path:'#'+this.pageNow+'#/',query:{blogTag:tag}})

            },
            previousPage() {
                if (this.pageNow >= 0 && this.pageNow <= this.pageNum) {
                    this.$store.commit('UpdatePageNow', this.pageNow - 1)
                    let tag = this.$store.state.tag
                  this.$router.push({path:'#'+this.pageNow+'#/',query:{blogTag:tag}})
                }
            },
            nextPage() {
                if (this.pageNow >= 0 && this.pageNow <= this.pageNum) {
                    this.$store.commit('UpdatePageNow', this.pageNow + 1)
                  let tag = this.$store.state.tag
                  this.$router.push({path:'#'+this.pageNow+'#/',query:{blogTag:tag}})
                }

            }


        }
    }
</script>

<style scoped>
    .MyNavgation {
        background-color: #f1f3f4;
        display: flex;
        justify-content: center;
        padding: 2.5rem 0;


    }

    .el-pagination.is-background .el-pager li {
        min-width: 25px !important;
    }





</style>